<template>
  <div>
    <!-- 面包屑 -->
    <bread :bread="$route.meta.bread" />
    <tag></tag>
    <!-- 商品搜索表单区域 -->
    <el-form :inline="true">
      <el-form-item>
        <el-input
          placeholder="请输入商品"
          style="width: 400px"
          v-model="keyword"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="goodForm = true">添加商品</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据列表 -->
    <el-table :data="goods1" style="width: 100%" border>
      <el-table-column label="ID">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="title" label="名称"> </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <el-image
            :src="scope.row.pic"
            style="width: 100px"
            :preview-src-list="[scope.row.pic]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="价格">
        <template slot-scope="scope"> ${{ scope.row.price }} </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 修改按钮 -->
          <el-button type="primary" icon="el-icon-edit" size="mini"  @click="editData(scope.row)">

          </el-button>
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="remove(scope.row._id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div style="margin-top: 20px">
      <el-pagination
        @size-change="changeSize"
        @current-change="changePage"
        :current-page="pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 商品添加 -->
    <el-dialog title="添加商品" :visible.sync="goodForm">
      <el-form :model="good" ref="goodForm1" :rules="rules">
        <el-form-item label="商品名称" :label-width="'80px'" prop="title">
          <el-input v-model="good.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="'80px'" prop="price">
          <el-input v-model="good.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" :label-width="'80px'">
          <el-input v-model="good.num" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="goodForm = false">取 消</el-button>
        <el-button type="primary" @click="addGoods('goodForm1')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
       <!-- 编辑的对话框 -->
        <el-dialog title="编辑分类" :visible.sync="showEdit">
            <el-form>
                <el-form-item label="名称">
                <el-input autocomplete="off" v-model="info.title"></el-input>
                </el-form-item>

                  <el-form-item label="价格">
                <el-input autocomplete="off" v-model="info.price"></el-input>
                </el-form-item>

            </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showEdit = false">取消</el-button>
            <el-button type="primary" @click="showEdit=false">确定</el-button>
        </div>
        </el-dialog>
  </div>
</template>

<script>
import bread from "../common/bread.vue";
import tag from "../common/tag";
export default {
  components: {
    tag,
    bread,
  },
  data() {
    return {
      // 列表data数据
      pagenum: 1,
      pagesize: 10,
      total: 0,
      goodsList: [],
      showEdit: false,
      info:{},
      //搜索的关键字
      keyword: "",
      // 添加商品的数据
      goodForm: false,
      good: {
        title: "",
        price: "",
        num: 1,
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur",
          },
        ],
        price: [
          {
            required: true,
            message: "请输入商品价格",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.getGoods();
  },
  methods: {
    //  获取本地数据
    getGoods() {
      this.$axios.get("/json/list1.json").then((res) => {
        this.goodsList = res.result;
      });
    },

    //  商品添加
    addGoods(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.good.pic = `/img/blog${parseInt(Math.random() * 3) + 1}.jpg`;
          this.good.id = parseInt(Math.random() * 10000);
          // 执行添加的操作
          this.goodsList.unshift(this.good);
          (this.good = {
            title: "",
            price: "",
            num: 1,
          }),
            // 关闭模态框
            (this.goodForm = false);
          this.$message.success("添加商品成功");
        } else {
          return false;
        }
      });
    },
    // 删除的操作
    remove(id) {
      let index = this.goodsList.findIndex((item) => {
        return item._id == id;
      });
      this.goodsList.splice(index, 1);
    },

      //编辑的对话框
            editData(info){
              //显示对话框
              this.info=info 
              this.showEdit=true;
            },
    // 改变每页显示的数据个数的时候触发
    changeSize(size) {
      // 改变每页显示的条数
      this.pagesize = size;
    },

    // 改变当前页使用的方法
    changePage(page) {
      this.pagenum = page;
    },
  },
  // 计算属性
  computed: {
    // 筛选商品列表的分页数据
    goods1() {
      // 把变量赋值给中间变量
      let goodsList = this.goodsList;
      // 模糊搜索操作
      goodsList = goodsList.filter((item) => {
        return item.title.includes(this.keyword);
      });
      //计算分页的数据
      let start = (this.pagenum - 1) * this.pagesize;
      let end = start + this.pagesize;
      //返回分页后的数据
      return goodsList.slice(start, end);
    },
  },
  watch: {
    goodsList(newValue) {
      this.total = newValue.length;
    },
  },
};
</script>

<style scoped>
</style>
